<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div id="app1">
		<div v-html="rawHtml"></div>
		<div>{{rawHtml}}</div>
		<div>{{num + 2}}</div>
		<div>{{arr.join('|')}}</div>
		<div v-bind:id="'list-' + num"></div>
		<div>图片扩展名是：{{fileName | getExt}}</div>
	</div>

	<hr>

	<div id="app2">
		<input type="checkbox" v-on:click="onChkClick">
		<button v-bind:disabled="isDisable">my btn</button>
	</div>
	
	<hr>

	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		var app1 = new Vue({
			el: '#app1',
			data: {
				rawHtml: '<h1>abc</h1>',
				num: 8,
				arr: [1, 2, 3, 4, 5],
				fileName: 'abc.png'
			},
			filters: {
				getExt: function(val) {
					return val.substr(val.indexOf('.'));
				}
			}
		});

		//////////////////////////////////

		var app2 = new Vue({
			el: '#app2',
			data: {
				isDisable: true
			},
			methods: {
				onChkClick: function(evt) {
					var chk = evt.target;
					if (chk.checked) {
						this.isDisable = false;
					} else {
						this.isDisable = true;
					}
				}
			}
		});
	</script>
</body>
</html>